<template>
    <xy-general-panel>

        <el-button icon="el-icon-plus" @click="addHandle" type="primary">添加</el-button>
        <el-button icon="el-icon-edit" @click="editHandle" type="primary">修改</el-button>
        <el-button icon="el-icon-edit" @click="setRoleViewHandle('PC')" type="primary">PC端模块配置</el-button>
        <el-button icon="el-icon-edit" @click="setRoleViewHandle('MOBILE')" type="primary">MOBILE端模块配置</el-button>
        <xy-collapse-search-bar/>
        <div>
            <div class="container">
                <!--table-->
                <xy-role-view-table ref="table" @selectionChange="selectionChangeHandle"
                                 @rowClick="rowClickHandle"
                                 @deleteSuccess="deleteSuccess"
                                 @onEdit="editHandle"></xy-role-view-table>

                <!--dialog-->
                <el-dialog :title="formTitle" :visible.sync="formDialogVisible">
                    <xy-role-view-form ref="form" :method="formMethod" :id="updateId" :version="formVersion"
                                    @submitSuccess="submitSuccess"></xy-role-view-form>
                </el-dialog>
                <el-dialog :title="authName + ' - ' + scene+'端配置'" width="32%" :visible.sync="setViewDialogVisible">
                    <xy-set-view-widget-form :roleViewId="setRoleViewId"
                                             :setView="setView"
                                             :authName="authName"
                                             :viewWidget="scene"
                                             :version="version"
                                             @submitSuccess="setRoleViewSuccess"
                                             ref="setRoleViewForm"></xy-set-view-widget-form>
                </el-dialog>
            </div>
        </div>
    </xy-general-panel>
</template>

<script>
    import xyRoleViewTable from './RoleViewTable.vue';
    import xyRoleViewForm from './RoleViewForm.vue';
    import xySetViewWidgetForm from './SetViewWidgetForm.vue';
    
    export default {
        name: "roleViewIndex",
        mounted() {

        },
        components: {
            xyRoleViewTable,
            xyRoleViewForm,
            xySetViewWidgetForm
        },
        computed: {
            formTitle: function () {
                if (this.formMethod === 'POST') {
                    return "添加权限";
                }
                return "修改权限";
            }
        },
        data() {
            return {
                version: undefined,
                scene:undefined,
                filter: {
                    name: undefined,
                },
                //对话框
                formDialogVisible: false,
                setViewDialogVisible: false,
                updateId: undefined,     //要更新的主键
                selectRows: [],          //选中行
                setView: undefined,  //要配置模块的权限角色
                authName: undefined, //要配置角色的名称
                setRoleViewId: undefined,  //要配置模块的权限id
                formLabelWidth: '120px',
                formMethod: 'POST',
                formVersion: null
            };
        },

        methods: {
            /**
             *  权限列表刷新
             */
            tableRefresh: function () {
                this.$refs.table.loadData(this.filter);
            },
            /**
             * 表格选中事件
             */
            selectionChangeHandle: function (selection) {
                this.selectRows = selection;
            },
            /**
             * 表格行单击事件
             */
            rowClickHandle(row, event, column) {
                this.selectRows = [row];
            },
            /**
             *  添加权限
             */
            addHandle: function () {
                this.formVersion = 'add';
                this.formMethod = 'POST';
                this.updateId = undefined;
                this.formDialogVisible = true;
            },

            /**
             *  权限编辑:根据table选择的进行修改
             */
            editHandle: function () {
                this.formVersion = Math.uuid();
                if (this.selectRows.length === 0) {
                    this.$message.info('请选择要修改的权限');
                    return;
                } else if (this.selectRows.length > 1) {
                    this.$message.info('请选择一个权限');
                    return;
                }

                this.formMethod = 'PUT';
                this.updateId = this.selectRows[0].id;
                if (this.$refs.form) {
                    this.$refs.form.loadData(this.updateId);
                }
                this.formDialogVisible = true;
            },
            /**
             * 角色配置
             */
            setRoleViewHandle: function (val) {
                if (this.selectRows.length === 0) {
                    this.$message.info('请选择要配置的权限');
                    return;
                } else if (this.selectRows.length > 1) {
                    this.$message.info('请选择一个权限');
                    return;
                }
                this.version = Math.uuid();
                this.scene = val;
                this.setView = this.selectRows[0].role;
                this.setRoleViewId = this.selectRows[0].id;
                this.authName = this.selectRows[0].authName;

                this.setViewDialogVisible = true;
            },
            /**
             * 表单提交成功
             */
            submitSuccess: function () {
                this.tableRefresh();
                this.formDialogVisible = false;
            },
            /**
             * 角色配置成功
             */
            setRoleViewSuccess: function () {
                this.setViewDialogVisible = false;
            },
            /**
             * 删除成功事件
             */
            deleteSuccess: function () {
                this.tableRefresh();
            },
            /**
             * 查询提交
             */
            searchSubmit: function (data) {
                this.filter = data;
                this.tableRefresh();
            },
        }
    }
</script>

<style scoped>

</style>
